<template>
  <el-button @click="add" type="primary">加点</el-button>
  <el-input
    v-model="areaV"
    v-deinput="area"
    placeholder="请输入区域名字 例如: 北京"
    clearable
  ></el-input>
  <Map :data="mapData" ref="map" />
</template>

<script setup>
import Map from "./MassPointsMap/index.vue";
import data from "./data";
import { onMounted, ref, shallowRef } from "vue";
const map = shallowRef(null);
// 数据
let mapData = data.map((item) => {
  let obj = {
    lnglat: [item.longitude * 1, item.latitude * 1], //点标记位置
    name: item.stationName,
  };
  return obj;
});

let areaV = ref("");

onMounted(() => {
  map.value.initMap(); // 加载地图
});

const add = () => {
  JSON.parse(JSON.stringify(mapData)).map((item) => {
    let obj = {
      lnglat: [
        item.lnglat[0] * 1 + Math.random().toFixed(4) * 1,
        item.lnglat[1] * 1 + Math.random().toFixed(4) * 1,
      ], //点标记位置
      name: item.stationName,
    };
    mapData.push(obj);
  });
  map.value.addPoint(mapData); // 添加点位方法
};

const area = () => {
  map.value.initMap(areaV.value); // 加载地图
};
</script>

<style lang="scss" scoped>
.el-button,
.el-input {
  position: absolute;
  z-index: 10;
  left: 20px;
  top: 20px;
}
.el-input {
  width: 200px;
  left: 100px;
}
</style>
